import {
  selectRecordSaveSwitch,
  updateRecordSaveSwitch,
} from '@/services/api/api-assess-month-emphasize-record';
import { SettingOutlined } from '@ant-design/icons';
import { DrawerForm, ProFormInstance, ProFormSegmented } from '@ant-design/pro-components';
import { Alert, Button, message } from 'antd';
import 'dayjs/locale/zh-cn';
import React, { useRef, useState } from 'react';
import { useAccess } from 'umi';

interface SettingRecordProps {}

const SettingRecord: React.FC<SettingRecordProps> = ({}) => {
  const access = useAccess();
  const formRef = useRef<ProFormInstance>();

  const [recordSaveSwitch, setRecordSaveSwitchState] =
    useState<AssessMonthEmphasizeRecordData.RecordSaveSwitchVo>();

  const [loading, setLoadingState] = useState<boolean>(false);

  /**
   * 加载 开关 记录
   * @param key
   */
  const loadSelectRecordSaveSwitch = async () => {
    setLoadingState(true);

    try {
      const response = await selectRecordSaveSwitch();
      if (response.code === 0) {
        setRecordSaveSwitchState(response.data);

        formRef.current?.setFieldsValue({
          handSwitch: `${response.data.handSwitch}`,
        });
      }
      setLoadingState(false);
    } catch (error) {
      setLoadingState(false);
    }
  };

  return (
    <>
      <DrawerForm
        key="assess_emphasize_record_setting_drawer_form"
        title={`设置`}
        drawerProps={{
          width: 700,
          maskClosable: false,
          destroyOnClose: true,
        }}
        layout="horizontal"
        trigger={
          <Button icon={<SettingOutlined />} type="primary">
            设置
          </Button>
        }
        loading={loading}
        formRef={formRef}
        onFinish={async (values) => {
          try {
            // const response = await saveRole({
            //   ...values,
            // });
            // if (response.code === 0) {
            //   message.success('提交成功');
            // }
          } catch (error) {
            message.success('提交失败');
          }
          return true;
        }}
        onOpenChange={(visible: boolean) => {
          if (visible) {
            loadSelectRecordSaveSwitch();
          } else {
          }
        }}
      >
        <Alert
          message={`填报入口：${
            recordSaveSwitch?.handSwitch == 1 || recordSaveSwitch?.systemSwitch == 1
              ? '开启'
              : '关闭'
          }`}
          description={`系统${
            recordSaveSwitch?.handSwitch == 1 || recordSaveSwitch?.systemSwitch == 1
              ? '关闭'
              : '开启'
          }时间：${
            recordSaveSwitch?.handSwitch == 1 || recordSaveSwitch?.systemSwitch == 1
              ? recordSaveSwitch?.systemCloseSwitchTime
              : recordSaveSwitch?.systemOpenSwitchTime
          }`}
          type={
            recordSaveSwitch?.handSwitch == 1 || recordSaveSwitch?.systemSwitch == 1
              ? 'success'
              : 'error'
          }
          showIcon
          style={{
            marginBottom: '10px',
          }}
        />
        <ProFormSegmented
          name="handSwitch"
          label="填报入口手动开关控制器"
          valueEnum={{
            '1': '开启',
            '0': '关闭',
          }}
          fieldProps={{
            async onChange(value) {
              console.log('===', value);
              setLoadingState(true);
              const response = await updateRecordSaveSwitch();
              if (response.code === 0) {
                loadSelectRecordSaveSwitch();
              } else {
                setLoadingState(false);
                message.error('操作失败');
              }
            },
          }}
        />
      </DrawerForm>
    </>
  );
};
export default SettingRecord;
